<template>
	<view>		
		<view class="banner" v-if="Banner.length" style="margin-bottom: 20rpx;height:250rpx; overflow: hidden;">
			<swiper  class="swiper1" :circular="true" :indicator-dots="false" autoplay="true"  interval="2000" duration="500"	>					
				<swiper-item v-for="(item,index) in Banner" :key="index">
					<navigator v-if="item.adv_url" :url="item.adv_url"><image style="width: 100%;" :src="item.adv_img" mode="widthFix"></image></navigator>
					<image v-else style="width: 100%;" :src="item.adv_img" mode="widthFix"></image>
				</swiper-item>	
			</swiper>	
		</view>	
		
		
		<view class="processLine"></view>
		<view style="display: flex;" class="process">
			<view v-for="(item,index) in processData" :key="index"  @click="activeColor1(index,item.timestamp,item.start_hour,item.end_hour,item.state)" class="processBox">
				<view :class="[(activeNum1 == index) ? 'processTimeActive':'']" class="timeBox fs18">{{item.scene}}</view>
				<view :class="[(activeNum1 == index) ? 'pointsActive':'']" class="pointsBox"></view>
				<view :class="[(activeNum1 == index) ? 'processNameActive':'']" class="processBs fs21 C333">{{item.desc}}</view>
			</view>
		</view>
		
		<view style="width: 710upx;margin: 30upx auto;height: 200rpx; overflow: hidden;" class="videoWrap" v-if="Banner1.length>0">
			<view class="page-section-spacing">
				<swiper class="swiper" :circular="circular" :indicator-dots="indicatorDots" autoplay="true" interval="2000" duration="500"	>
							<swiper-item v-for="(item,index) in Banner1" :key="index">
								<navigator v-if="item.adv_url" :url="item.adv_url"><image style="width: 100%;" :src="item.adv_img" mode="widthFix"></image></navigator>
								<image v-else style="width: 100%;" :src="item.adv_img" mode="widthFix"></image>
							</swiper-item>	
				</swiper>
			</view>
		</view>	
		<view style="padding: 0 20upx;"  class="tabNav">
			<view class="fs30 curr">
				最新秒杀
			</view>
		
			<view :class="num==index?'curr':''" v-for="(item,index) in classList" :key="index" @click="tabNav(index,item.class_id)">
				{{item.class_name}}
			</view>			
		</view>		
		<view style="" class="productLis">
			<view  v-for="(item2,index2) in bottonLis" :key="index2" class="product">
				<image style="width: 333upx;height: 333upx;" :src="item2.goods_image" mode=""></image>
				<view class="productName fs18 C333 twoline">{{item2.goods_name}}</view>
				<view class="">
					<text class="Cfe0000 fs21 bold">￥{{item2.miaosha_price}} </text>  <text class="paddingL20 strick fs18 C666">￥{{item2.max_price}}</text>
				</view>
				<view class="">				
					<text style="display: inline-block;margin-top: 18upx;" class="fs21 C666">已售{{item2.sale_percentage}}%</text>										
					<view v-if="msBtnFlag == 2" @click="stopBuy" class="productBtn">已结束</view>
					<view v-if="msBtnFlag == 0"  @click="toDetail(item2.goods_id)" class="productBtn">立即秒杀</view>
					<view v-if="msBtnFlag == 1" @click="toDetail(item2.goods_id)" class="productBtn">立即秒杀</view>	
				</view>
			</view>
		</view>
	
			<view v-if="bottonLis.length<=0">
				<image style="width: 100%;" :src="`${picUrl}/InfoNull.png`" mode="widthFix"></image>
			</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				hasmore:false,
				curpage:1,
				msBtnFlag:1,				
				indicatorDots:false,
				circular:true,				
				classList:[],
				num:0,
				processData:[],				
				activeNum1:"",
				ListInfo:[],
				bottonLisFirstid:"",
				bottonLis:[],
				Banner:"",
				Banner1:"",
				timestamp:"",
				start_hour:"",
				end_hour:"",
			}
		},
		
		onShow() {
	  
		},
		onLoad() {
			this.getlis();
			this.getBanner();
		},
		onReachBottom() {
			this.more()
		},
		methods: {
			stopBuy(){
				uni.showToast({
					icon:"error",
					title:'该秒杀已结束！'
				})
			},
			getBanner(){//获取广告列表
				this.$util.request({
					url: '/mobile/index.php?act=h5_adv&op=miaoshaAdvList',
					method: 'get',
					data: {},
				}).then((res)=> {
					this.Banner=res.datas.adv_list
					if(res.datas.adv_list1.length!=0){
						this.Banner1=[]
						res.datas.adv_list1.forEach(item=>{
							if(item.adv_url!=''){
								this.Banner1.push(item)
							}
						})
					}
				})
			},
			toDetail(id){
				console.log(id)
				uni.navigateTo({
					url:"/mall/goods/info?goods_id="+id
				})
			},
			getli(state){
						var that=this;
						this.$util.request({
							url: '/mobile/index.php?act=miaosha&op=list',
							method: 'get',
							data: {
								"timestamp":this.timestamp,
								"start_hour":this.start_hour,
								"end_hour":this.end_hour,
								curpage:this.curpage,
							},
						}).then((res)=> {
							this.ListInfo=res.datas.recommend_list
							if(state){
								this.bottonLis=this.bottonLis.concat(res.datas.list)
							}else{
								this.bottonLis = res.datas.list
							}
							this.hasmore=res.datas.hasmore
						})
			},
			activeColor1(index,timestamp,start_hour,end_hour,state1){
				this.msBtnFlag=state1
				this.activeNum1=index
				this.timestamp=timestamp
				this.start_hour=start_hour
				this.end_hour=end_hour
				this.curpage=1
				this.getli()
			},
			getlis(){//获取分类
				var that=this;
				this.$util.request({					            
					url: '/mobile/index.php?act=miaosha&op=index',
					method: 'get',
					data: {},
				}).then((res) => {
					this.processData=res.datas.changci//场次
					if(res.datas.changci.length!=0){
						res.datas.changci.forEach((item,index)=>{
							if(item.desc=='进行中'){
								this.activeNum1=index
								this.timestamp=item.timestamp
								this.start_hour=item.start_hour
								this.end_hour=item.end_hour
								this.getli()
							}
						})
					}
					this.classList=res.datas.class//分类
					if(this.classList[0]){
						this.bottonLisFirstid=this.classList[0].class_id
					}
					// this.getBottonLis()
				})
			},
			tabNav(index,id){
				this.curpage=1
				this.bottonLis=[]
				 this.num=index
				 this.bottonLisFirstid=id
				 this.getli()
				 // this.getBottonLis()
			},
			// getBottonLis(state){
			// 	var that=this		
			// 	this.$util.request({					       
			// 		url: '/mobile/index.php?act=goods&op=goods_list',
			// 		method: 'get',
			// 		data: {
			// 			"curpage":this.curpage,
			// 			"gc_id":that.bottonLisFirstid
			// 		},
			// 	}).then((res)=> {
			// 		this.ListInfo=res.datas.recommend_list
			// 		if(state){
			// 			this.bottonLis=this.bottonLis.concat(res.datas.list)
			// 		}else{
			// 			this.bottonLis = res.datas.list
			// 		}
			// 		this.hasmore=res.datas.paged.hasmore
			// 	})
			// },
			more(){
				if(this.hasmore){
					this.curpage++
					this.getli(true)
				}else{
					uni.showToast({
						title:"没有更多数据",
						icon:"none"
					})
				}
			}
			
			
		}
		
	}
</script>

<style>
	.tabNav view{
		color: #666666;
		margin-right: 35rpx;
		display: inline-block;
		position: relative;
		z-index: 999;
	}
	.curr{
		font-size: 30rpx;
		color: #ff4300 !important;
		font-weight: bold;
	}
	view{
		background-color: #FFFFFF;
	}
	.Cfe0000{
		color: #ff4300;
	}
	.Cc06{
		color: #ff4300;
	}
	.mt55mb30{
		margin-top: 55upx;
		margin-bottom: 30upx;
	}
	.Cfff{
		color: #FFFFFF;
	}
	.Cfe0000{
		color: #ff4300;
	}

	.flex{		
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-content: space-between;
	}
	.paddingL20{
		padding-left: 20upx;
	}
	.C999{
		color:#999 ;
	}
	.Cff0101{
		color:#ff0101 ;
	}
	.Cc00251{
		color: #c00251;
	}
	.strick{
		text-decoration: line-through;
	}
	.Cfe0000{
		color: #ff4300;
	}
	.line1{
		width: 430upx;
	}
	.hide{
		display: none;
	}
	.marginB20{
		margin-bottom: 20upx;
	}
	
	.twoline{
	   overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.pl20{
		padding-left: 20upx;
	}
	.positionT{
		position: relative;
		top: 50upx;
	}
	.paddingB15{
		padding-bottom: 15upx;
	}
	.borderB{
		border-bottom: 1px solid #f4f4f6;
	}
	.borderT{
		border-top: 1px solid #f4f4f6;
	}
	.gl{
		position: absolute;
		right: 30upx;
	}
	.pr30{
		padding-right: 30upx;
	}
	.C333{
		color: #333333;
	}
	.C666{
		color: #666666;
	}
	.Cf00{
		color: #ff0000;
	}
	
	.bold{
		font-weight: bold;
	}
	.C1d1d1d{
		color:#1d1d1d ;
	}
	.fs30{
		font-size: 30upx
	}
	.fs26{
		font-size: 26upx
	}
	.fs12{
		font-size: 12upx
	}
	.fs16{
		font-size: 16upx
	}
	.fs14{
		font-size: 14upx
	}
	.fs27{
		font-size: 27upx
	}
	.fs18{
		font-size: 18upx
	}
	.fs28{
		font-size: 28upx
	}
	.fs10{
		font-size: 10upx
	}
	.fs30{
		font-size: 28upx
	}
	.fs24{
		font-size: 24upx
	}
	.fs20{
		font-size: 20upx
	}
	.fs22{
		font-size: 22upx
	}
	.fs21{
		font-size: 21upx
	}
	.fl{
		float: left;
	}
	.fr{
		float: right;
	}
	.tac{
		text-align: center;
	}
	.Ce5258e{
		color: #e5258e;
	}
	uni-page-body {
		background-color: #FFFFFF;
		color: rgb(102, 102, 102);
	}
	.process{
		margin-top: 55upx;
		padding: 0 20upx;
		box-sizing: border-box;
		width: 100%;
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;
	}

	/* .processTime>view{
		color: #FFFFFF;
		margin: 0 20upx;
		width: 200upx;
		height: 50upx;
		line-height: 50upx;
		text-align: center;
		border-radius: 15upx;
		background-color: #999999;
		box-shadow: 2upx 2upx 10upx #999999;
	}
	.processTime view.processTimeActive{
		background-color: #ff4300;
		box-shadow: 2upx 2upx 10upx #ff4300;
	}
	.points{
		margin: 0 20upx;
		padding: 20upx 93upx;
	}
	.points>view{
		position: relative;
		z-index: 10;
		width: 12upx;
		height: 12upx;
		border-radius: 50%;
		background-color: #6c6c6c;
		border: 4upx solid #858585;
	}
	.points>view.pointsActive{
		background-color: #e71488;
		border: 4upx solid #ef66b2;
	}
	.processLine{
		position: relative;
		z-index: 5;
		top: 32upx;
		height: 1upx;
		border-top:1upx solid #e5007e ;
		width: 100%;
	}
	.processName{
		padding: 0upx 58upx;
		margin-top: -10upx;
	}
	.processNameActive{
		color: #e5007e;
	} */
	.productLis{
		padding: 0 20upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-content: space-between;
		flex-wrap: wrap;
		background-color: #FFFFFF;
	}
	.product{
		margin-top: 30upx;
		box-sizing: border-box;
		width: 355upx;
		height: 577upx;		
		border: 1px solid #eeeeee;
		padding: 15upx 10upx;
	}
	.productLis view:nth-child(2n){
		border-left: none;
	}
	.msonimg{
		position: relative;
		top: -346upx;
		left: 0;
		color: #FFFFFF;
		z-index: 10;
		background-color: #ff4300;
		width: 92upx;
		height: 40upx;
		line-height: 40upx;
		text-align: center;
		border-top-left-radius: 7upx;
	}
	.productName{
		min-height: 68upx;
		padding: 0 10upx;
		line-height: 35upx;
		/* margin-top: -45upx; */
	}
	.productBtn{
		/* margin-top: 20upx; */
		float: right;
		display: inline-block;
		width: 154upx;
		height: 65upx;
		text-align: center;
		line-height: 65upx;
		color: #FFFFFF;
		background-color: #ff4300;
		border-radius: 12upx;
	}
	
	
	
	.fs30{
		/* font-size: 30upx */
		font-size: 45upx
	}
	.fs26{
		font-size:39upx
		/* font-size: 26upx */
	}
	.fs12{
		font-size: 18upx
		/* font-size: 12upx */
	}
	.fs16{
		font-size: 24upx
		/* font-size: 16upx */
	}
	.fs14{
		font-size: 21upx
		/* font-size: 14upx */
	}
	.fs15{
		font-size: 22.5upx
		/* font-size: 15upx */
	}
	.fs27{
		font-size: 40.5upx
		/* font-size: 27upx */
	}
	.fs18{
		font-size: 27upx
		/* font-size: 18upx */
	}
	.fs28{
		font-size: 42upx
		/* font-size: 28upx */
	}
	.fs10{
		font-size: 15upx
		/* font-size: 10upx */
	}
	.fs30{
		font-size: 45upx
		/* font-size: 28upx */
	}
	.fs24{
		font-size: 36upx
		/* font-size: 24upx */
	}
	.fs20{
		font-size:30upx
		/* font-size: 20upx */
	}
	.fs22{
		font-size:33upx
		/* font-size: 22upx */
	}
	.fs21{
		font-size: 31.5upx
		/* font-size: 21upx */
	}
	.timeBox{
		color: #FFFFFF;
		width: 200upx;
		height: 50upx;
		line-height: 50upx;
		text-align: center;
		border-radius: 15upx;
		background-color: #999999;
		box-shadow: 2upx 2upx 10upx #999999;
	}
	.timeBox.processTimeActive{
		background-color: #ff4300;
		box-shadow: 2upx 2upx 10upx #ff4300;
	}
	.pointsBox{
		position: relative;
		z-index: 10;
		width: 12upx;
		height: 12upx;
		border-radius: 50%;
		background-color: #6c6c6c;
		border: 4upx solid #858585;
		margin: 20upx auto 10upx;		
	}
	.pointsBox.pointsActive{
		background-color: #e71488;
		border: 4upx solid #ef66b2;
	}
	.processBs{
		width: 200upx;
		height: 50upx;
		line-height: 50upx;
		text-align: center;
	}
	.processBs.processNameActive{
		color: #e5007e;
	}
	.processBox{
		padding: 0 20upx;
		height: 200upx;
	}
	.processLine{
		position: relative;
		z-index: 5;
		top: 134upx;
		height: 1upx;
		border-top:1upx solid #e5007e ;
		width: 710upx;
		margin: 0 20upx;
	}
</style>
